<template>
  <!-- 卡片视图区 -->
  <el-card>
<el-row :gutter="25">
      <el-col :span="0">
      </el-col>

      <el-col :span="1">
        <el-button type="primary" @click="dialogAddVisible = true"
          >添加家谱</el-button
        >
      </el-col>
    </el-row>
    <!-- 列表 -->
    <el-table
      :data="GenealogyList"
      border
      stripe
      v-loading="isLoading"
      element-loading-background="rgba(255, 255, 255, .5)"
      element-loading-text="加载中，请稍后..."
      element-loading-spinner="el-icon-loading"
    >
      <el-table-column label="序号" type="index" fixed="left"></el-table-column>
      <el-table-column label="家谱编号" prop="GenealogyNo"></el-table-column>
      <el-table-column label="家谱名称" prop="GenealogyName"></el-table-column>
      <el-table-column label="更新时间" prop="UpdateTime"></el-table-column>
      <el-table-column label="操作" fixed="right">
        <template #default="scope">
          <!-- 修改 -->
          <el-button
            type="primary"
            icon="el-icon-edit"
            size="mini"
            @click="
              dialogEditOpen(
                scope.row.GenealogyNo,
                scope.row.GenealogyName,
              )
            "
          >
          </el-button>
          <!-- 删除 -->
          <el-button
            type="danger"
            icon="el-icon-delete"
            size="mini"
            @click="deleteGenealogy(scope.row.GenealogyNo)"
          >
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryInfo.page"
      :page-sizes="[1, 2, 10, 100]"
      :page-size="queryInfo.limit"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>
  </el-card>

  <el-dialog title="添加家谱" v-model="dialogAddVisible" width="50%">
    <el-form
      :model="addForm"
      :rules="addFormRules"
      ref="addFormRef"
      label-width="100px"
    >
      <el-form-item label="家谱编号" prop="GenealogyNo">
        <el-input v-model="addForm.GenealogyNo" @blur="test()"></el-input>
      </el-form-item>
      <el-form-item label="家谱名称" prop="GenealogyName">
        <el-input v-model="addForm.GenealogyName"></el-input>
      </el-form-item>
      <el-form-item label="更新时间" prop="UpdateTime">
        <el-input v-model="addForm.UpdateTime"></el-input>
      </el-form-item>
    </el-form>
    <el-button type="primary" @click="addGenealogy()">确 定</el-button>
    <el-button @click="dialogAddVisible = false">取 消</el-button>
  </el-dialog>

  <!-- 编辑对话框 -->
  <el-dialog title="编辑家谱" v-model="dialogEditVisible" width="50%">
    <el-form
      :model="editForm"
      :rules="editFormRules"
      ref="editFormRef"
      label-width="100px"
    >
      <el-form-item label="家谱编号" prop="GenealogyNo">
        <el-input v-model="editForm.GenealogyNo"></el-input>
      </el-form-item>
      <el-form-item label="家谱名称" prop="GenealogyName">
        <el-input v-model="editForm.GenealogyName"></el-input>
      </el-form-item>
    </el-form>
    <el-button type="primary" @click="updateGenealogy">确 定</el-button>
    <el-button @click="dialogEditVisible = false">取 消</el-button>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      isLoading: false,
      dialogAddVisible: false,
      dialogEditVisible: false,
      queryInfo: {
        searchNo: "",
        page: 1,
        limit: 10,
      },
      GenealogyList: [], // 家谱列表
      total: 0, // 最大数据记录
      addForm: {
        GenealogyNo: "",
        GenealogyName: "",
        UpdateTime: "",
      },
      editForm: {
        GenealogyNo: "",
        GenealogyName: "",
        UpdateTime: "",
      },
      addFormRules: {
        GenealogyNo: [
          {
            required: true,
            message: "请输入家谱编号",
            trigger: "blur",
          },
        ],
        GenealogyName: [
          {
            required: true,
            message: "请输入家谱名称",
            trigger: "blur",
          },
        ],
      },
      editFormRules: {
        GenealogyNo: [
          {
            required: false,
            message: "请输入家谱编号",
            trigger: "blur",
          },
        ],
       GenealogyName: [
          {
            required: false,
            message: "请输入家谱名称",
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {
    this.getGenealogyList();
  },
  methods: {
    async getGenealogyList() {
      this.isLoading = true;
      // 调用post请求
      console.log(this.GenealogyList)
      const { data: res } = await this.$http.get("system/apis/genealogy", {
        params: this.queryInfo,
      });
      if (res.code != 20000) {
        this.$message.error("加载用户列表失败");
        this.isLoading = false;
      }
      this.GenealogyList = res.data.value; // 将返回数据赋值
      this.total = res.data.total; // 总个数
      this.isLoading = false;
    },
    // 监听pageSize改变的事件
    handleSizeChange(newLimit) {
      this.queryInfo.limit = newLimit;
      this.getGenealogyList(); // 数据发生改变重新申请数据
    },
    // 监听pageNum改变的事件
    handleCurrentChange(newPage) {
      this.queryInfo.page = newPage;
      this.getGenealogyList(); // 数据发生改变重新申请数据
    },
    test(){
      console.log(this.addForm.GenealogyNo);
    },
    async deleteGenealogy(GenealogyNo) {
      // 弹框
      const confirmResult = await this.$confirm(
        "此操作将永久删除该家谱, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => err);
      // 成功删除为confirm 取消为 cancel
      if (confirmResult != "confirm") {
        return this.$message.info("已取消删除");
      }
      const { data: res } = await this.$http.delete(
        "system/apis/genealogy?genealogy_no=" + GenealogyNo
      );
      console.log(res);
      if (res.code != 20000) {
        return this.$message.error("删除失败");
      }
      this.$message.success("删除成功");
      this.getGenealogyList();
      console.log(GenealogyNo)
    },
    // 添加学生
    addGenealogy() {
      this.$refs.addFormRef.validate(async (valid) => {
        if (!valid) return;
        // 发起请求
        console.log( this.addForm);
        const { data: res } = await this.$http.post(
          "/system/apis/genealogy",
          this.addForm
        );
        if (res.code == 20000) {
          this.getGenealogyList();
          this.dialogAddVisible = false;
          console.log(this.GenealogyList)
          return this.$message.success("添加成功");
        }
        this.$message.error("添加失败");
      });
    },
    // 编辑
    updateGenealogy() {
      this.$refs.editFormRef.validate(async (valid) => {
        if (!valid) return;
        // 发起请求
        console.log(this.GenealogyNo)
        const { data: res } = await this.$http.put(
          "/system/apis/genealogy",
          this.editForm
        );
        if (res.code == 20000) {
          this.getGenealogyList();
          this.dialogEditVisible = false;
          return this.$message.success("编辑成功");
        }
        this.$message.error("编辑失败");
      });
    },
    dialogEditOpen(
      GenealogyNo,
      GenealogyName
    ) {
      this.editForm.GenealogyNo = String(GenealogyNo);
      this.editForm.GenealogyName = String(GenealogyName);
      this.dialogEditVisible = true;
    },
  },
};
</script>

<style>
</style>